<script setup lang="ts">
import CustomNavbar from './components/CustomNavbar.vue'
import CategoryPanel from './components/CategoryPanel.vue'
import HotPanel from './components/HotPanel.vue'
import HomeSkeleton from './components/HomeSkeleton.vue'
import { ref } from 'vue'
import { onLoad } from '@dcloudio/uni-app'
import type { CategoryItem, HotItem } from '@/types/home'
import { getHomeBannerAPI, getHomeCategoryAPI, getHomeHotAPI } from '@/services/home'
import type { BaseGuessInstance } from '@/types/component'
import type { BannerItem } from '@/types/global'
import { useGuessLike, useScrollViewRefresh, useSkeleton } from '@/composables'

// 轮播图数据
const bannerList = ref<BannerItem[]>([])
// 商品分类面板数据
const categoryList = ref<CategoryItem[]>([])
// 热门推荐面板数据
const hotList = ref<HotItem[]>([])
// 下拉刷新是否被触发，默认为 false-未触发
// const isTriggered = ref(false)

// 获取轮播图数据
const getBannerList = async () => {
  const res = await getHomeBannerAPI()
  bannerList.value = res.result
}

// 获取商品分类面板数据
const getCategoryList = async () => {
  const res = await getHomeCategoryAPI()
  categoryList.value = res.result
}

// 获取热门推荐面板数据
const getHotList = async () => {
  const res = await getHomeHotAPI()
  hotList.value = res.result
}

// 注入猜你喜欢组合逻辑
const { guessLikeRef, onScrolltolower } = useGuessLike()

// 注入scroll-view组件下拉刷新组合逻辑
const { isTriggered, refreshController } = useScrollViewRefresh()

/**
 * 下拉刷新组件被触发，重置猜你喜欢组件的数据，并重新获取页面数据
 * refreshController是一个下拉刷新控制器，传入一个异步的回调函数，通常是获取数据的逻辑，
 * 获取数据前，isTriggered置为true，刷新动画打开，获取成功后，isTriggered置为false，关闭下拉刷新
 */
const onRefresherrefresh = () =>
  refreshController(async () => {
    // 重置猜你喜欢组件的数据
    guessLikeRef.value?.resetData()
    // 重新获取猜你喜欢商品数据
    // 重新获取页面数据
    await Promise.all([
      getBannerList(),
      getCategoryList(),
      getHotList(),
      guessLikeRef.value?.getMore(),
    ])
  })

// 注入骨架屏组合式逻辑
const { isShowSkeleton, skeletonController } = useSkeleton()

// 页面加载
onLoad(async () => {
  // 骨架屏控件，传入一个异步的回调函数，通常是获取数据的逻辑，获取成功前打开骨架屏，获取成功后关闭骨架屏
  skeletonController(async () => {
    await Promise.all([getBannerList(), getCategoryList(), getHotList()])
  })
})
</script>

<template>
  <view class="index">
    <!-- 自定义导航栏 -->
    <CustomNavbar class="navbar" />
    <!-- 滚动容器 -->
    <scroll-view
      class="scroll-view"
      scroll-y
      refresher-enabled
      :refresher-triggered="isTriggered"
      @refresherrefresh="onRefresherrefresh"
      @scrolltolower="onScrolltolower"
    >
      <!-- 骨架屏 -->
      <HomeSkeleton v-if="isShowSkeleton" />
      <template v-else>
        <!-- 轮播图 -->
        <BaseSwiper :list="bannerList" />
        <!-- 商品分类面板 -->
        <CategoryPanel :list="categoryList" />
        <!-- 热门推荐面板 -->
        <HotPanel :list="hotList" />
        <!-- 猜你喜欢商品列表 -->
        <BaseGuess ref="guessLikeRef" />
      </template>
    </scroll-view>
  </view>
</template>

<style lang="scss">
.index {
  display: flex;
  flex-direction: column;
  height: 100vh;
}
.navbar {
  flex-shrink: 0;
}
.scroll-view {
  flex: 1;
}
</style>
